<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-custom">
    <div class="w-full max-w-md p-8 bg-white rounded-2xl shadow-custom">
      <div class="text-center mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary">重置密码</h2>
        <p class="text-gray-500 mt-2">请输入您的邮箱地址</p>
      </div>
      <form @submit.prevent="handleResetPassword" class="space-y-6">
        <div class="space-y-2">
          <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
              <i class="fa fa-envelope"></i>
            </span>
            <input 
              v-model="form.email" 
              type="email" 
              id="email" 
              class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom" 
              placeholder="请输入邮箱地址"
              required
            >
          </div>
        </div>
        <button 
          type="submit" 
          class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center"
          :disabled="loading"
        >
          <span v-if="!loading">发送重置邮件</span>
          <span v-else>发送中...</span>
          <i class="fa fa-paper-plane ml-2"></i>
        </button>
      </form>
      <div class="mt-6 text-center">
        <button 
          type="button" 
          class="text-sm font-medium text-primary hover:text-primary/80 transition-custom"
          @click="backToLogin"
        >
          返回登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForgotPasswordView',
  data() {
    return {
      form: {
        email: ''
      },
      loading: false
    }
  },
  methods: {
    async handleResetPassword() {
      try {
        this.loading = true
        // 实现重置密码逻辑
        await new Promise(resolve => setTimeout(resolve, 1000))
        // 成功后显示提示并返回登录页
        this.$router.push('/login')
      } catch (error) {
        console.error('重置密码失败:', error)
      } finally {
        this.loading = false
      }
    },
    backToLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.bg-gradient-custom {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.shadow-custom {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style> 